<template>
  <div class="Index-wrap">
    <van-nav-bar
      title="中医药房"
      :fixed="true"
      @click-left="address"
      @click-right="onClickRight"
    >
      <div slot="left">
        南宁
        <van-icon name="arrow-down" />
      </div>
      <van-icon slot="right" name="search" />
    </van-nav-bar>

    <van-swipe :autoplay="3000" indicator-color="white" class="swipe-xl">
      <van-swipe-item v-for="item in swipe.url" :key="item" class="swipe">
        <img :src="item" />
      </van-swipe-item>
    </van-swipe>

    <div class="m-t-s p-xl m-b-s df category fs-xs text-center bg-white">
      <div>
        <router-link :to="{ name: 'videocategory' }">
          <div class="radius50">
            <svg slot="icon" class="icon tool-icon" aria-hidden="true">
              <use xlink:href="#icon-shipin"></use>
            </svg>
          </div>
          <p class="van-ellipsis">看视频赚钱</p>
        </router-link>
      </div>
      <div>
        <router-link :to="{ name: 'doctors' }">
          <div class="radius50">
            <svg slot="icon" class="icon tool-icon" aria-hidden="true">
              <use xlink:href="#icon-yisheng"></use>
            </svg>
          </div>
          <p class="van-ellipsis">名医专栏</p>
        </router-link>
      </div>
      <div>
        <router-link :to="{ name: 'activity' }">
          <div class="radius50">
            <svg slot="icon" class="icon tool-icon" aria-hidden="true">
              <use xlink:href="#icon-huodong"></use>
            </svg>
          </div>
          <p class="van-ellipsis">线下活动</p>
        </router-link>
      </div>
      <div>
        <router-link :to="{ name: 'course' }">
          <div class="radius50">
            <svg slot="icon" class="icon tool-icon" aria-hidden="true">
              <use xlink:href="#icon-jilu"></use>
            </svg>
          </div>
          <p class="van-ellipsis">课题报名</p>
        </router-link>
      </div>
      <div>
        <router-link :to="{ name: 'vip' }">
          <div class="radius50">
            <svg slot="icon" class="icon tool-icon" aria-hidden="true">
              <use xlink:href="#icon-huiyuan"></use>
            </svg>
          </div>
          <p class="van-ellipsis">会员通道</p>
        </router-link>
      </div>
    </div>

    <plank :type="'row'">
      <span slot="header-title">
        视频课程
      </span>
    </plank>

    <plank :type="'col'">
      <span slot="header-title">
        音频课程
      </span>
    </plank>

    <plank :type="'col'">
      <span slot="header-title">
        健康讲座
      </span>
    </plank>

    <plank :type="'special'">
      <span slot="header-title">
        线下活动
      </span>
    </plank>

    <plank :type="'row'">
      <span slot="header-title">
        课程报名
      </span>
    </plank>
  </div>
</template>

<script>
import plank from "@/components/index/plank";
export default {
  name: "Index",
  data() {
    return {
      swipe: {
        url: [
          "https://img.zcool.cn/community/01dec15bd6d796a801213deafc13b3.jpg@375w_1l_0o_100sh.jpg",
          "https://img.zcool.cn/community/0122475bd6d7cfa801213deadec900.jpg@375w_1l_0o_100sh.jpg",
          "https://img.zcool.cn/community/01e4a65bd6d7d1a801213dea52b6eb.jpg@375w_1l_0o_100sh.jpg",
          "https://img.zcool.cn/community/01798a5bd6d796a8012099c86c4bcf.jpg@375w_1l_0o_100sh.jpg",
          "https://img.zcool.cn/community/0134bc5d1225a8a8012155295bb109.jpg@375w_1l_0o_100sh.jpg"
        ]
      }
    };
  },
  created() {},
  components: {
    plank
  },
  methods: {
    address() {},
    onClickRight() {}
  }
};
</script>

<style lang="scss">
.Index-wrap {
  padding-top: 46px;
  .tool-icon {
    font-size: 2.6923 * $size;
  }
}
.category {
  justify-content: space-between;
  div {
    flex-basis: 25%;
  }
}
</style>
